<template>
  <div class="navWrap">
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      text-color="#bfcbd9"
    >
      <router-link to="/admin/home" class="trg" @click="addTag('home')">
        <el-menu-item index="1" class="index_home">主页</el-menu-item>
      </router-link>

      <el-submenu :index="(index+2+'')" v-for="(item,index) in menus" :key="index">
        <template slot="title">
          <i :class="item.icon_name"></i>
          <span slot="title">{{item.title}}</span>
        </template>

        <router-link
          :to="unit.path"
          class="trg"
          v-for="(unit,unitIndex) in item.submenu"
          :key="unitIndex"
          @click.native="navClick(unit.title,unit.path)"
        >
          <el-menu-item index="2-1">{{unit.title}}</el-menu-item>
        </router-link>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      isCollapse: false,
      test: "hello",
      menus: [
        {
          title: "商品管理",
          submenu: [
            { title: "商品列表", path: "/admin/product" },
            { title: "添加商品", path: "/admin/pcreate" }
          ],
          icon_name: "el-icon-goods"
        },
        {
          title: "订单管理",
          submenu: [{ title: "订单列表", path: "/admin/order" }],
          icon_name: "el-icon-tickets"
        },
        {
          title: "用户管理",
          submenu: [{ title: "用户列表", path: "/admin/user" }],
          icon_name: "el-icon-user"
        }
      ]
    };
  },
  methods: {
    ...mapMutations({
      addTag: "ADD_TAG_ITME"
    }),
    navClick(title, path) {
      let newTagItem = {};
      if (title === "主页") {
        newTagItem.title = "主页";
        newTagItem.path = "/adimin";
      } else {
        newTagItem.title = title;
        newTagItem.path = path;
      }
      this.addTag(newTagItem);
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
};
</script>

<style lang="scss" >
/* 侧边栏宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.navWrap {
  padding-top: 60px;
  ul {
    border: none !important;
  }
}

.index_home {
  position: relative;
  z-index: 9999;
  height: 59px !important;
}
.el-menu--collapse {
  width: 100px;
  height: 100%;
}
.el-submenu__title {
  line-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-menu {
  background-color: transparent !important;
  border: none;
  height: 100%;
}
.el-submenu__icon-arrow {
  top: 42px !important ;
}
.trg {
  text-decoration: transparent;
  color: #bfcbd9;
}
ul {
  overflow: hidden;
}
</style>

